<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> SimpleModal Demos </title>

<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2007 - Eric Martin' />
<meta name='description' content='SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.' />
<meta name='keywords' content='simplemodal jquery plugin modal dialog css javascript dom' />

<!-- Import jQuery and SimpleModal source files -->
<script src='js/jquery.js' type='text/javascript'></script>
<script src='js/jquery.simplemodal.js' type='text/javascript'></script>

<!-- Demo specific stuff -->
<script src='js/demo.js' type='text/javascript'></script>
<link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />

<!-- Basic Dialog -->
<script src='js/basic.js' type='text/javascript'></script>
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<!-- IE 6 hacks -->
<!--[if lt IE 7]>
<link type='text/css' href='css/basic_ie.css' rel='stylesheet' media='screen' />
<![endif]-->

<!-- Contact Form -->
<script src='js/contact.js' type='text/javascript'></script>
<link type='text/css' href='css/contact.css' rel='stylesheet' media='screen' />
<!-- IE 6 hacks -->
<!--[if lt IE 7]>
<link type='text/css' href='css/contact_ie.css' rel='stylesheet' media='screen' />
<![endif]-->

</head>
<body>
<div id='notice'>&raquo; Back to <a href='/projects/simplemodal'>SimpleModal Home</a></div>
<div id='container'>
	<div id='header'><h1>SimpleModal Demos</h1></div>
	<div id='content'>
		<div id='basicModal'><h2>Basic Modal Dialog</h2>
			<p>A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on the developer for the look and feel.</p>
			<form action='download/' method='post'>
				<input type='button' name='basic' value='Demo' class='demo'/><input type='button' name='download' value='Download' class='demo'/>
				<input type='hidden' name='demo' value='basic'/>
			</form>
		</div>
		<div id="basicModalContent" style='display:none'>
			<h1>Basic Modal Dialog</h1>
			<p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with standard HTML or with DOM element(s).</p>
			<p>Examples:</p>
			<p><code>$('#basicModalContent').modal(); // jQuery object; this demo</code></p>
			<p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p>
			<p><code>$.modal('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>
			<p><a href='http://www.ericmmartin.com/projects/simplemodal'>More details...</a></p>
		</div>
		<br/>
		<hr/>
		<div id='contactForm'><h2>Contact Form</h2>
			<p>A contact form built on SimpleModal. Demonstrates the use of the <code>onOpen</code>, <code>onShow</code> and <code>onClose</code> callbacks, as well as the use of Ajax with SimpleModal.</p>
			<form action='download/' method='post'>
				<input type='button' name='contact' value='Demo' class='demo'/><input type='button' name='download' value='Download' class='demo'/>
				<input type='hidden' name='demo' value='contact'/>
			</form>
		</div>
	<br/>
	</div>
</div>
<div style='height:400px;'></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2691485-4";
urchinTracker();
</script>
</body>
</html>
